<template>
	<view class="box bg-light w-100">
		<tabsTop tabName="储值卡详情"></tabsTop>
		<!-- 储值卡详情 -->
		<view class="p-4 item rounded-lg bg-white w-100 ">
			<!-- 卡面 -->
			<view class="t1 rounded-lg p-2 back"
				:style="'background-image: url('+Domain_IMG+CardDetail.Picture_URL+');'">
				<view class="font-lg font-weight-bolder text-center">{{CardDetail.Prepayment_Card_Scheme_Name}}</view>
				<view class="font text-right"><text>￥{{CardDetail.Starting_Amount}}</text></view>
			</view>
			<!-- 详情 -->
			<view class="">
				<view class="font-lg font-weight-bolder mt-3">储值卡名称</view>
				<view class="mt-3 font-sm"><text>有效期：</text>
					<text>{{CardDetail.Permanent=='0'?'长期有效':(CardDetail.Effective_Date)+'天'}}</text></view>
				<view class="mt-3 font-sm"><text>享受折扣：</text> <text>{{CardDetail.Discount}}%</text></view>
			</view>
			<view class="mt-3 f1">
				<view class="mt-3 font-sm f1_2">
					<text>当前剩余：</text>
					<text v-if="Balance!=''" class="font-weight-bolder">￥<text class="font-weight-bolder font-lg">{{Balance}}</text></text>
				</view>
			</view>
		</view>
		<!-- 提示 -->
		<view v-if="Tips.length>0" class="p-4 item rounded-lg bg-white w-100 t2 mt-3 flex flex-column">
			<view class="font-lg font-weight-bolder text-center">温馨提示</view>
			<view v-for="(item,i) in Tips" :key="i" class="flex flex-column">
				<view class="mt-3 font-sm">
					<view class="t2-2-1">标题：</view>
					<view>{{item.Prepayment_Card_Scheme_Prompt}}</view>
				</view>
				<view class="mt-3 font-sm">
					<view class="t2-3-1">适用规则：</view>
					<view>{{item.Prepayment_Card_Scheme_Main}}</view>
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="p-4 item rounded-lg bg-white w-100 t3 mt-3">
			<view class="font-lg font-weight-bolder text-center t3-1"
				@click="handleTabs('/pages/card/Applicable_products?Prepayment_Card_Scheme_SerialNumber='+form.Prepayment_Card_Scheme_SerialNumber)">
				<text>适用商品</text> <text class="t3-1-2">查看更多</text>
			</view>
			<view v-for="(item,i) in Goods" :key="i" class="goods mt-3">
				<view class="left" style="overflow: hidden;">
					<image style="height: 100%;" class="w-100" :src="Domain_IMG + item.Picture_URL" mode=""></image>
				</view>
				<view class="right p-2">
					<view class="text-ellipsis">{{item.Article_Name}}</view>
					<view class="jia_ge"> <text>销售价:</text> <text class="text-danger ">￥{{item.Sales_Unit_Price}}</text>
						<text style="text-decoration: line-through;font-size: 24rpx;" class="jg_false"></text></view>
					<view><text>剩余数量:</text> <text>{{item.Stock_Remain}}件</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import {
		WXPrepaymentCardID,
		WXPrepaymentCardArticle,
	} from '@/api/group.js'
	import tabsTop from "@/components/tabs/tabs-top.vue";
	export default {
		components: { //轮播图组件
			tabsTop,
		},
		data() {
			return {
				form: {
					Prepayment_Card_Scheme_SerialNumber: '',
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					App_ID: app.globalData.App_ID,
					page: 1,
					limit: 5
				},
				Domain_IMG: app.globalData.Domain_IMG,
				CardDetail: {
					Balance:''
				},
				Balance:'',
				Tips: [],
				Goods: []
			};
		},
		onLoad(e) { 
			this.CardDetail.Balance = e.Balance
			this.Balance = e.Balance
			console.log(e.Balance)
			this.form.Prepayment_Card_Scheme_SerialNumber = e.Prepayment_Card_Scheme_SerialNumber
			this.getCardDetail(e.Prepayment_Card_Scheme_SerialNumber)
			this.getCardByGoods(this.form)
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			async getCardDetail(Prepayment_Card_Scheme_SerialNumber) {
				const res = await WXPrepaymentCardID({
					Prepayment_Card_Scheme_SerialNumber,
					App_ID:app.globalData.App_ID
				})
				console.log(res)
				if (res.Status == 'success') {
					this.CardDetail = res.prepayment_card_scheme[0]
					this.Tips = res.prepayment_card_scheme_prompt
				}
			},
			async getCardByGoods(data) {
				const res = await WXPrepaymentCardArticle(data)
				console.log(res)
				if (res.Status == 'success') {
					this.Goods = res.tableData
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		box-sizing: border-box;

		.item {
			box-sizing: border-box;

			.t1 {
				height: 300rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				box-sizing: border-box;
				border: 1px solid #000;
			}
		}

		.f1 {
			.f1_2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.t2 {
			view {
				display: flex;
			}

			.t2-2-1 {
				width: 50px;
			}

			.t2-3-1 {
				width: 145px;
			}
		}

		.t3 {
			.t3-1 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.t3-1-2 {
					font-weight: normal;
					font-size: 24rpx;
				}
			}

			.goods {
				width: 100%;
				// height: 180rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.right {
					flex: 1;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					font-size: 28rpx;
					height: 100%;
					font-size: 30rpx;

					view {
						margin: 20rpx 0 0 0;
					}

					.jia_ge {
						.jg_false {
							display: inline-block;
							margin: 0 0 0 10rpx;
						}
					}
				}
			}

		}
	}

	.back {
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>